<html>
<head>
<meta name='apple-mobile-web-app-capable' content='yes' />
<title>Orrery</title>
<script type="text/javascript" src="js/SolarSystem.js"></script>
<script type="text/javascript" src="js/PlanetElement.js"></script>
<script type="text/javascript" src="js/StarsView.js"></script>
<script type="text/javascript" src="js/PlanetaryPositions.js"></script>
<script type="text/javascript" src="js/NumberUtils.js"></script>
<script type="text/javascript" src="js/PlanetsAnimation.js"></script>
<script type="text/javascript" src="js/DateAndTimeDropDowns.js"></script>
<script type="text/javascript" src="js/CityCoordsMenu.js"></script>
<script type="text/javascript" src="js/PlanetBirthday.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="application/x-javascript">
	
</script>
<link rel="stylesheet" type="text/css" href="css/simpleOrrery.css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
<script type="text/javascript">
	function init(){
		TWEEN.start();
		new DateAndTimeDropDowns(document.getElementById("formContainer"), "form0");
		new NumberUtils();
		new CityCoordsMenu();
		//var pp = new PlanetaryPositions();
		new PlanetBirthday();
		var ssv = new SolarSystem();
		ssv.makeCircularOrbitElements(document.getElementById("sky"))
		var p = new PlanetsAnimation()
		p.pole = PlanetsAnimation.SOUTH;
		p.init();
		var date = new Date();
		var dateObj = {};
		dateObj.time = date.getTime();
		ssv.setOnLoadComplete(imagesLoaded);
		
		
		function imagesLoaded(){
			p.circularOrbit(date);
			ssv.positionOrbitingElements();
		}

		function doTween(ratio) {
			if(!ratio) ratio = 1;
			new TWEEN.Tween(dateObj)
			.to({time : dateObj.time + (86400000 * PlanetaryPositions.YEAR_DAYS * ratio)}, 6000)
			.easing(TWEEN.Easing.Cubic.EaseInOut)
			.onUpdate(update)
			.onComplete(tweenComplete)
			.start();

		}
		document.getElementById('solar_system').onclick = solarSystemClick;
		function solarSystemClick(event){
			var planetId = event.target.parentNode.id
			switch (planetId){
				case "sun" :
					tweenToNewDate(new Date().getTime());
					dateObj.time = date.getTime();
				break;
				case "bg" :
				
				break;
				default :
					doTween($PlanetBirthday.PLANETS[planetId].yearRatio)
				break;
			}
			
		}
		document.getElementById('nowDate').onclick = setToTimeNow;
		function setToTimeNow(){
			tweenToNewDate(new Date());
		}
		document.getElementById('goDate').onclick = tweenToFormDate;
		function tweenToFormDate() {

			var form = document.getElementById('form0');
			var newTime = new Date(form.year.value, form.month.value,
					form.day.value).getTime();
			
			tweenToNewDate(newTime);
		}
		function tweenToNewDate(newTime, pLatitude, pLongitude) {
			newTime = newTime - dateObj.time;
		
			new TWEEN.Tween(dateObj).to({ time : dateObj.time + newTime}, 6000).easing(TWEEN.Easing.Cubic.EaseInOut).onUpdate(update).start();
			

		}
		function tweenComplete() {
		}
		function update() {
			var newT = dateObj.time;
			p.circularOrbit(new Date(newT));
			ssv.positionOrbitingElements();
		};
	};
		//p.animate();
	</script>
</head>
<body onLoad="init()">

<div id="container">
	<div id="header">
		<div id="formContainer">

		</div>

		<div id="dateOut"></div>
	</div>
	<div id="sky">

	</div>
</div>
<div id="clearfloat"></div>

</body>
</html>